<template>
   <div class="marBtm">
     <el-button type="text" v-if="upLoad" @click="upLoad=false" icon="el-icon-close"></el-button>
      <el-upload
      v-loading="upLoad"
          element-loading-text="文件上传中..."
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
        class="upload-demo"
        :action="action"
        :data="uploadForm"
        :show-file-list="options['show-file-list']"
        :limit='options.limit'
        :on-success="uploadSuccess"
        :before-upload="beforeUpload"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        :file-list="info.fileList"
        :list-type="options['list-type']"
       >

      <template v-if="type==='file'">
    <el-button :type="options.btnType"  :icon="options.icon||'el-icon-upload2'">{{ options.text!==null?(options.text || "上传文件"):""}}</el-button>
    <div slot="tip" class="el-upload__tip">{{ options.msg || "支持扩展名：.ppt .xls .doc .docx .pdf .jpg..."}}</div>
     </template>
     <template v-else-if="type=='pic'">
       <img v-if="info.imageUrl" :src="info.imageUrl" class="avatar">
       <div v-else class="avatar-uploader-content">
         <i class="el-icon-plus" />
         <p>上传封面图片</p>
         <p>只支持jpg/png格式，不超过2m</p>
       </div>
     </template>

     <template v-else>
      <slot />
      </template>
  </el-upload>
  </div>
</template>
<script>
  import {preUpload} from '@/api/uploads'
  export default {
    name:'UploadPicFile',
    data(){
      return{
        action: '',
        uploadHeader:{
          'Content-Type': 'multipart/form-data'
        },
        upLoad:false,
        isShowList: false,
        uploadForm: {},
        info:{
          fileList:[],
          imageUrl:''
        },
        isNotTest:false
      }

    },
    created() {

    },
    watch:{
     ['options.fileList'](val){
       this.info.fileList = val
      // 
     }
    },
    props:['type','options'],
    methods:{
      handleRemove (file, fileList) {
        console.log(file, fileList);
        this.info.fileList = fileList;
      },
      handlePreview (file) {
       // console.log(file);
        window.open(file.url,file.name)
      },
      beforeRemove (file, fileList) {
        return this.isNotTest ||  this.$confirm(`确定移除 ${file.name}？`);
      },
      uploadSuccess (res, file) {
        this.info.fileList.push({
           name: file.name,
           url: this.info.filesUrl
         });
         this.upLoad = false
         this.$emit('uploadSuccess',{res, file,that:this})
        console.log('uploadSuccess上传成功:', URL.createObjectURL(file.raw),res, file,this.info.filesUrl);
      },
      beforeUpload (file) {
        if(this.type === 'pic'){
          const imgStr = this.options.fileTest || /\.(jpg|jpeg|png|JPG|PNG|JPEG)$/;
          if (!imgStr.test(file.name)) {
            this.$message.error('上传格式不对，请重新上传!');
            this.isNotTest = true
            return false;
          }
        }
         var  fileStr = this.options.fileTest || /$/;
          if (!fileStr.test(file.name)) {
             this.isNotTest = true
          this.$message.error('上传格式不对，请重新上传!');
          return false;
        }

       var that = this
        let continueUpload = false;

       return new Promise((resolve, reject) => {
          preUpload({
            biz: 'OPEN',
            name: file.name,
            size: file.size
          }).then(res => {
            console.log('文件上传：', res.data);
            this.action = res.data.action;
            this.uploadForm = res.data.parameters;
            this.info.filesUrl = res.data.uri;
            continueUpload = true;
            that.upLoad = true
            resolve(continueUpload);
          }).catch(err => {
          reject(continueUpload);
          });
        });

      },
    }
  }
</script>

<style>
</style>
